<template>
    <div class="div-container">
        <!-- <div class="swiper-class">
            <div class="swiper-wrapper"> -->
                <div class="swiper-slide" v-for="(item,index) in warnMessage" :key="index">
                    <!-- <div class="warn-font"> -->
                        <!-- "阈值为"+
                            item.warnValue + unit[initColumn.findIndex((val) => val.value == item.warnColumn)] + -->
                        {{item.siloStockName +"中"+ 
                            initColumn[initColumn.findIndex((val) => val.value == item.warnColumn)].label + ","
                            +(parseTime(item.createTime).substring(5))+"为"
                            +item.warnResultValue + unit[initColumn.findIndex((val) => val.value == item.warnColumn)]}}
                    <!-- </div> -->
                </div>                                     
            <!-- </div>
        </div> -->
    </div>
</template>

<script>

import "swiper/css/swiper.css";
import Swiper from 'swiper';

export default {
    props:['warnMessage'],
    dicts: ['sys_radar_column'],                                                                                                            
    data(){
        return{
            warnSwiper:undefined,
            columnWatch:undefined,  //监视中转
            initColumn:undefined,   //该字段就是从字典中拿到的值
            sys_radar_column:undefined,
            warnDict:[],
            unit:[],
            thisMessage:[],
        }
    },
    watch:{
        columnWatch: {
            handler(newValue) {
                this.initColumn = JSON.parse(JSON.stringify(this.columnWatch))
                // console.log(this.initColumn)
                // console.log(this.initColumn[0].raw.remark)
                if(!this.initColumn[0]) return
                this.initColumn.forEach(item => {
                    this.unit.push(item.raw.remark)
                });
                
            },
            deep:true,
        },
        // item.siloStockName +"中"+ initColumn[initColumn.findIndex((val) => val.value == item.warnColumn)].label +"阈值为"+item.warnValue + unit[initColumn.findIndex((val) => val.value == item.warnColumn)] + ",当前为" +item.warnResultValue + unit[initColumn.findIndex((val) => val.value == item.warnColumn)]
        // warnMessage:{
        //     handler(newValue){
        //         // this.warnSwiper = undefined;
        //         // this.initSwiper();
        //     }
        // }
    },
    mounted(){
        this.columnWatch = this.dict.type.sys_radar_column
        
    },
    methods:{
        // initSwiper(){
        //     setTimeout(()=>{
        //     // if(!this.warnMessage) return
        //         // var·
        //         this.warnSwiper = new Swiper('.swiper-class', {
        //             //可选选项，自动滑动
        //             speed: 500,//可选选项，滑动速度
        //             autoplay: {
        //                 autoplay: true,
        //                 delay: 1000,//1秒切换一次
        //                 // disableOnInteraction: false,
        //             },
        //             // loop: true,
        //             // slidesPerView: 5,
        //             slidesPerView: 'auto',
        //             direction: 'vertical',
        //             cssMode: true
        //         });
        //     },1000)

        // },
    }

}
</script>

<style lang="scss" scoped>
.div-container{
    // position: absolute;
    margin-left: 20px;
    // width: calc(100% - 20px);
    height: 100%;
    // transform: translate3d(0,0,0);
    
}
.swiper-slide{
    font-size: 14px;
    // height:20px !important;
    line-height: 20px;
    height: auto;
    // -webkit-backface-visibility: hidden;
    // -webkit-transform: translate3d(0,0,0);
}

// .swiper-class{

//     // color: red;
//     // opacity: 0.8;
//     height: 100%;
//     // transform:translate3d(0,0,0)!important;
//     // overflow: hidden;

// }
// .swiper-wrapper{
//     // -webkit-transform-style: preserve-3d;
//     // height: 100%!important;
//     // width: 100%;
//     transform: translate3d(0,0,0);
// }
// .swiper-class .swiper-wrapper  {
 
//     /* 默认是ease-out */

//     -webkit-transition-timing-function: linear;  

//     -ms-transition-timing-function: linear;

//     -moz-transition-timing-function: linear;

//     -o-transition-timing-function: linear;

//     transition-timing-function: linear;

// }
</style>